<template>
    <view class="body-view">
        <videoplay :record_id="id" @share="share"></videoplay>
    </view>
</template>

<script>
  import saystory from "../../pages/story/index.vue"
  import videoplay from "../find/index.vue"
  import my from "../../pages/my/index.vue"
  export default {
    name: "index",
    components:{
      my,videoplay,saystory
    },
    data() {
      return {
        id:1,
        shareContent:{},
        scrollLeft: 0,
        isClickChange: false,
        currentTab: 0,
        swiperDateList: [[],[],[],[],[],[]]
      }
    },
    onLoad: function(param) {
      console.log(param.scene,'onload');

      if(param.scene){
        this.id = param.scene;
      }else{
        this.id = param.id;
      }

      if (param.from == 'index') {
        uni.setNavigationBarTitle({
          title: '返回首页',
        });
      }


      uni.setStorageSync('redirectTo','/pages/tape/record?id=' + this.id);
      //初始化数据

    },

    onHide(){
      console.log('页面隐藏');
    },
    onUnload(){
      console.log('页面卸载');
    },
    onShow(){
      console.log('页面显示');
    },
    onShareAppMessage(res) {

      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: this.shareContent.title,
        path: this.shareContent.path,
        imageUrl:this.shareContent.thumb,
        desc:this.content,
      }
    },
    methods: {
      share(param){
        console.log(param);
        this.shareContent = param;
      },

      swichMenu: async function (current) { //点击其中一个 menu
        if (this.currentTab == current) {
          return false;
        } else {
          this.currentTab = current;
          this.setScrollLeft(current);
        }
      },
      swiperChange: async function (e) {
        let index = e.target.current;
        this.setScrollLeft(index);
        this.currentTab = index;
      },
      setScrollLeft: async function (tabIndex) {
        let leftWidthSum = 0;
        for (var i = 0; i <= tabIndex; i++) {
          let nowElement = await this.getWidth('tabNum' + i);
          leftWidthSum = leftWidthSum + nowElement.width;
        }
        let winWidth = uni.getSystemInfoSync().windowWidth;
        this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
      },
      getWidth: function (id) { //得到元素的宽高
        return new Promise((res, rej) => {
          uni.createSelectorQuery().select("#" + id).fields({
            size: true,
            scrollOffset: true
          }, (data) => {
            res(data);
          }).exec();
        })
      }
    }
  }
</script>

<style lang='scss'>
    /*page {*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    align-items: flex-start;*/
    /*    justify-content: center;*/
    /*    background: rgba(255, 255, 255, 0);*/
    /*}*/

    .body-view {
        height: 100%;
        width: 100%;
    }
    .scroll_view{
        width: 100%;
        position: fixed;
        top: 0upx;
        left: 0upx;
        z-index: 100;
        height: 90upx;
        display: flex;
        align-items: center;
    }
    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;
        background-color: rgba(255,255,255,0);
        height: 100%;
        /* 在这里设置导航条高度 */
    }.top-menu-view2 {
         background-color: rgba(255,255,255,1);
         /* 在这里设置导航条高度 */
     }

    .top-menu-view .menu-one-view {
        display: inline-block;
        white-space: nowrap;
        width: 33.3%;
        height: 75upx;
    }

    .top-menu-view .menu-one-view .menu-one {
        /* 在这里写 单个按钮样式 */
        /*margin-left: 60upx;*/
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-txt {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight: 800;
        color: $uni-color-664e37;
        line-height: 61upx;
    }.top-menu-view .menu-one-view .menu-one .menu-one-txt2 {
         height: 61upx;
         font-size:$uni-font-size-base;
         font-weight: 400;
         color: #ffffff;
         opacity: 0.7;
         line-height: 61upx;
     }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
        width: 60%;
        height: 4upx;
    }

    .top-menu-view .menu-one-view .menu-one-act {
        /* 在这里写 单个按钮样式 */
        /*margin-left: 60upx;*/
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight: 400;
        color: $uni-color-fcb300;
        line-height: 61upx;
    }
    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt2 {
        height: 61upx;
        font-size:$uni-font-size-base;
        font-weight: 400;
        color: $uni-color-fcb300;
        /*opacity: 0.7;*/
        line-height: 61upx;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
        width: 32upx;
        height: 6upx;
        border-radius:4upx ;
        background: $uni-color-fcb300;
    }

    .swiper-box-list {
        flex: 1;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
    }

    .swiper-one-list {
        height: 100%;
        width: 100%;
    }

    .swiper-one-list .swiper-list-entity {
        width: 100%;
        height: 75upx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

</style>
